<template>
  <div>
    <div class="g_home" v-if="router_active==false">
    <div class="g_container">
      <div class="top">
        <div class="left">
          <div>Hi，{{ name }}</div>
          <div>今天你想查看哪个知识库？</div>
        </div>
        <div class="right" @click="Search_id(Search_name)">
          <el-input
            v-model="Search_name"
            style="width: 240px"
            placeholder="搜索知识库"
            :suffix-icon="Search"
          />
          <!-- :change="Search_id(Search_name)" -->
          <div class="button">
            <el-button type="success" @click="dialogFormVisible = true"
              >创建知识库</el-button
            >
          </div>
            <el-dialog
            title="创建知识库"
            :visible.sync="dialogFormVisible"
            custom-class="add_dialog"
          >
            <el-form :model="formInline" :rules="rules" ref="formInline">
              <el-form-item label="知识库名称" prop="kb_name">
                <el-input
                  v-model="formInline.kb_name"
                  placeholder="知识库名称"
                  maxlength="20"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="知识库描述" prop="kb_info">
                <el-input
                  type="textarea"
                  v-model="formInline.kb_info"
                  placeholder="描述你的知识库内容"
                  maxlength="500"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="封面预览"> </el-form-item>
              <div
                class=""
                style="display: flex; justify-content: space-between"
              >
                <div class="block">
                  <el-image style="width: 100%; height: 100%" src="">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
                <div class="upload-demo_one">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload" style="margin-top: 0px"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                  </el-upload>
                </div>
              </div>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="center">
        <div>最近查看</div>
        <div class="zjck">
          <div class="box" v-for="(item, index) in zhishuku1" :key="index">
            <div class="box_s">
              <i class="el-icon-more" @click="is_active1(index)"></i>
              <div class="del" v-if="item.is_active" @click="open(index, item)">
                删除
              </div>
              <div class="h1">{{ item.name }}</div>
              <div class="text">
                {{ item.kbInfo }}
              </div>
              <div class="box_di">
                <div>
                  <i class="el-icon-folder">{{ item.fileNumber }}</i>
                </div>
                <div>
                  <i class="el-icon-date">{{ item.createTime }}</i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 40px;">{{Search_name==''? '所有知识库':  '查到的知识库' }}</div>
        <div class="zjck">
          <div class="box" v-for="(item, index) in zhishuku" :key="index">
            <div class="box_s">
              <i class="el-icon-more" @click="is_active(index)"></i>
              <div class="del" v-if="item.is_active" @click="open(index, item)">
                删除
              </div>
              <div class="h1" @click="nativeOpen(item.id)">{{ item.name }}</div>
              <div class="text">
                {{ item.kbInfo }}
              </div>
              <div class="box_di">
                <div>
                  <i class="el-icon-folder">{{ item.fileNumber }}</i>
                </div>
                <div>
                  <i class="el-icon-date">{{ item.createTime }}</i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="zhishuku.length == 0">搜索好像没有结果，换个关键词试试吧！</div>
      </div>
    </div>
  </div>
  <file v-if="router_active==true" :parentMessage="file_id"></file>

  </div>
 
</template>
<script>
import * as g_homeApi from "@/api/g_home";
import file from "../views/file.vue";

export default {
  components: {
    file,
  },
  data() {
    return {
      router_active:false,
      input2: "",
      name: "",
      Search: "el-icon-search",
      Search_name:"",
      zhishuku: [],
      zhishuku1: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      formInline: {
        kb_name: "", //知识库名称
        kb_info: "", //知识库简介(用于Agent)
      },
      file_id:"",
      rules: {
        kb_name: [
          { required: true, message: "请输入知识库名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到20 个字符", trigger: "blur" },
        ],
        kb_info: [
          { required: true, message: "请输入知识库描述", trigger: "blur" },
          { min: 3, max: 500, message: "长度在 3 到 500 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.get_list();
    let userInfo = JSON.parse(localStorage.userInfo);
    this.name = userInfo.name;
  },
  methods: {
    get_list() {
      g_homeApi.list({ name: "" }).then((res) => {
        let data = res.data;
        data.forEach((element) => {
          element.is_active = false;
        });
        this.zhishuku = data;

        this.zhishuku1 = [
          {
            createTime: "05/06/2024 15:21:24",
            fileNumber: 12,
            id: "1807975737674326017",
            is_active: false,
            kbInfo:
              "知识库描述知识库描述知识库描述知识库描述知识库描述知识库描述知识库描述",
            kbName: "f864308dd75d4b83870d055d9210ddd2",
            name: "知识库1",
            type: 1,
            updateTime: null,
            updateUserId: "1807616449688834050",
          },
          {
            createTime: "05/06/2024 15:21:24",
            fileNumber: 12,
            id: "1807975737674326017",
            is_active: false,
            kbInfo:
              "知识库描述知识库描述知识库描述知识库描述知识库描述知识库描述知识库描述",
            kbName: "f864308dd75d4b83870d055d9210ddd2",
            name: "知识库1",
            type: 1,
            updateTime: null,
            updateUserId: "1807616449688834050",
          },
          {
            createTime: "05/06/2024 15:21:24",
            fileNumber: 12,
            id: "1807975737674326017",
            is_active: false,
            kbInfo:
              "知识库描述知识库描述知识库描述知识库描述知识库描述知识库描述知识库描述",
            kbName: "f864308dd75d4b83870d055d9210ddd2",
            name: "知识库1",
            type: 1,
            updateTime: "",
            updateUserId: "1807616449688834050",
          },
        ];
      });
    },
    is_active(index) {
      this.zhishuku.forEach((element, i) => {
        if (index == i) {
          if (element.is_active != true) {
            element.is_active = true;
          } else {
            element.is_active = false;
          }
        } else {
          element.is_active = false;
        }
      });
    },
    submit() {
      let data = {
        name: this.formInline.kb_name,
        kbInfo: this.formInline.kb_info,
        type: 1,
      };
      g_homeApi.add(data).then((res) => {
        let rest = res.data;
        this.get_list();
        this.dialogFormVisible = false;
        this.nativeOpen(rest)
      });
    },
    false_active(index) {
      this.zhishuku.forEach((element, i) => {
        if (index == i) {
          element.is_active = false;
        } else {
          element.is_active = false;
        }
      });
    },
    open(index, item) {
      this.$confirm("点击确认将删除包含此知识库在内的所有文档内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          g_homeApi.del({ id: item.id }).then((res) => {
            let rest = res;
          this.false_active(index);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.get_list();

          });
       
        })
        .catch(() => {
          this.false_active(index);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    nativeOpen(id) {
      // this.$router.push({ path: "/files", query: { id: id } });
      this.file_id=id;
      this.router_active=true
    },
    Search_id(name){
         g_homeApi.list({ name: name }).then((res) => {
        let data = res.data;
        data.forEach((element) => {
          element.is_active = false;
        });
        this.zhishuku = data
      });

     
    }

  },
};
</script>
<style >
.g_container {
  width: 94%;
  margin: 0 auto;
  margin-top: 60px;
  /* border: 0.01rem solid #000; */
  font-family: Source Han Sans;
  font-feature-settings: "kern" on;
  color: #000;
  transition: color 1s;
  font-weight: normal;
  letter-spacing: 0em;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  background-attachment: fixed;  
}
.top {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.top .left :nth-child(1) {
  font-size: 24px;
  font-weight: bold;
}

.right {
  width: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.center{
  margin-top:40px ;
}
.zjck {
  display: flex;
  /* justify-content: space-around; */
  /* margin-top: 4px; */
  flex-wrap: wrap;
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

.box::before {
  content: "";
  border-radius: 8px;
  /* background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2); */
    background-color: rgb(199, 237, 204);
}
.card::before {
  width: 104%;
  height: 102%;
  top: -1%;
  left: -2%;
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
.box {
  width: 240px;
  position: relative;
  height: 300px;
  border-radius: 27px;
  opacity: 1;
  background: #ffff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
  margin-top: 8px;
  margin-bottom: 50px;
  margin-right: 50px;
  position: relative;
  color: #ffff;
  /* color: #212534; */
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  /* font-family: cursive; */
  /* color: rgb(88 199 250 / 100%); */
  /* color: grey; */
  color: #000000e0;
  font-weight: 500;
  word-break: break-all;
  font-family: Source Han Sans;
  font-feature-settings: "kern" on;
  letter-spacing: 2px;
}
.box:hover {
  /* color: rgb(88 199 250 / 100%); */
  color: #67c23a;
border: 1px solid rgb(199, 237, 204) ;
font-weight: 600;

line-height: 200%;
  transition: color 1s;


}
.box:hover:before, .box:hover:after {
  animation: none;
  opacity: 0;
}
.box_s {
  width: 190px;
  height: 290px;
  /* border: 1px solid red; */
  margin: 0 auto;
}
.box_s i {
  float: right;
  cursor: pointer;
}
.box .h1 {
  clear: both;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 24px;
  cursor: pointer;
}
.box .text {
  margin-top: 20px;
  height: 180px;
  font-size: 14px;
  letter-spacing: 4px;
  line-height: 150%;
}
.box .del {
  position: absolute;
  cursor: pointer;
  right: -44px;
  bottom: 293px;
  width: 76px;
  height: 37px;
  line-height: 37px;
  font-size: 12px;
  text-align: center;
  background: #85ce61;
border-radius: 8px;
  color: #fff;
  /* border: 1px solid #d8d8d8; */
}
.box_di {
  margin-top: 20px;
}
.box_di div i {
  width: 100%;
  font-size: 9px;
  /* border: 1px solid red; */

  overflow: hidden;
}
.block {
  width: 84px;
  height: 90px;
  border: 1px solid #eee;
  font-size: 30px;
  text-align: center;
  line-height: 90px;
  border-radius: 6px;
}

.el-dialog {
  width: 528px;
  /* height: 502px; */
  border-radius: 30px;
}
/* .upload-demo_one{
  height: 77px !important;
  overflow: hidden;

} */

.el-upload-dragger {
  height: 90px !important;
  border: 1px solid #eee;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>